V
Vigilo design review · v0.1 01 / 19
Pregled projekta · za CRTA tim

Vigilo · prva iteracija dizajna
za Republičke izbore 2026

Design system + 10 mobilnih ekrana + 11 web admin ekrana. Sledi šetnja kroz odluke i flow-ove.

Design system
1v0.1 · 15 sekcija
Mobile ekrani
10M1—M10
Web admin ekrani
11W1—W11
Skala
5234BM · 4 612 posmatrača
V
Vigilo principi 02 / 19
Šest principa

Pravila koja vode sve odluke

Provera za svaki novi ekran. Ako nešto ne prolazi ova pravila — vraćamo se na njih pre nego što dodamo još jedno polje, dugme ili tab.

P1

Jedan ekran — jedna stvar

Nije forma + filteri + 5 akcija + dashboard. Razdvojeno. Lakše razumeti, lakše naučiti, lakše promeniti.

P2

Sistem klasifikuje, čovek se javlja

Posmatrač ne odlučuje lakši/teški. Sistem klasifikuje, zove PCC, posmatrač samo opisuje šta vidi.

P3

Notifikacije su targetirane

Po BM zaduženju, regionu, roli. Nikada globalno. „Hiljadu komada u sekundi" je bag, ne feature.

P4

Validacija je meka

Upozorenja sa eskalacijom, nikada blokirajuće. Tamarin princip: „ne možemo da znamo".

P5

Excel je bag

Ako bilo ko izvozi u Excel da bi obavio zadatak, sistem nije gotov.

P6

Mobile = brzina, web = pregled

Mobile: 3 tapa do svake stvari. Web: pretraga, filteri, bulk akcije, keyboard-first.

V
Vigilo design system v0.1 03 / 19
01 · Design System

Temelj za sve ekrane

Vigilo Design System v0.1

15 sekcija reference: foundations + komponente + obrasci. CRTA crveno kao akcent (~5% površine), warm ink paleta, Geist sans/mono (Latin + Cyrillic). Status sistema (UI) i status posmatrača (zelena/crvena/crna) su odvojeni — različite ose, različiti tokeni.

Foundations
Principi · boje · tipografija · spacing · radius · elevacija · ikonografija
Komponente
Dugmad · forme · bedževi · role chips · tabele · inbox · kartice · alerti · modali · toast · navigacija · map markeri
Patterns
Empty / loading / error states · pravilo: jedna akcija u empty, skeleton kopira oblik, error kaže šta korisnik može
V
Vigilo Vigilo Mobile 04 / 19
02 · Vigilo Mobile

10 mobilnih ekrana za posmatrače

React Native (iOS + Android). Svaki ekran je interaktivni prototype sa Tweaks panelom za eksploraciju stanja. Story-line: Jovana Đurović, STO IN, BM 0341/A — OŠ Vladislav Ribnikar, Novi Beograd, cela smena 06—22, izborni dan 14:08.

M1
Onboarding
6 koraka
M2
Home dashboard
3 varijante
M3
SOS modul
live + SMS failover
M4
Statistički izveštaj
soft warnings
M5
Incident + AI
state machine
M6
ZmAI chat + poziv
voice trijaža
M7
Komunikacija
zamena Viber/Signal
M8
OCR zapisnik
kamera + AI
M9
Obuka
video + kviz
M10
LTO unos
3-osovinski tagovi
V
Vigilo M1 + M2 05 / 19
Mobile · ulaz

Onboarding posmatrača i home dashboard

M1

Onboarding posmatrača

Self-serve registracija u 6 koraka: osnovni podaci → JMBG + lična karta (foto) → telefon + SMS verifikacija → email link → consent (GDPR / javna lista / kodeks) → done. Zahtev ide HR koordinaciji na odobrenje.

Tweaks: skok kroz korake6 korakaSMS mock keypad
M2

Home dashboard · 3 varijante

Posle login-a vidi BM, sledeći deadline, SOS dugme, quick akcije. Tri metafore u design canvas-u side-by-side: Calm / Timeline / Action grid. Pikiran A · Calm.

PILOT — A Calmdesign canvasSOS hold 1.2s
V
Vigilo M3 + M4 06 / 19
Mobile · izborni dan

SOS modul i statistički izveštaj

M3

SOS modul

Posle drži-pritiskaj 1.2s na home-u: live lokacija + audio + lanac obaveštenja (CC + koordinator + šef misije + pravni tim). SMS failover kad veza padne. Otkazivanje drži-pritiskaj 2s — sporije od aktiviranja.

Tweaks: 4G/SMS · stanjelive lokacijaSMS failover
M4

Statistički izveštaj

Periodična forma sa steperima, prethodni izveštaj kao referenca, inline soft warnings (skok preveliki, razlika listića). „Pošalji uprkos upozorenju" žuto — nikad blokira. Dva STO po smeni, primary/secondary view.

Tweaks: rola · prefillsoft warningsco-observer
V
Vigilo M5 + M6 07 / 19
Mobile · AI flow-ovi

Incident klasifikacija i ZmAI asistent

M5

Incident forma sa AI

State machine: entry (opis + atačmenti) → classifying (Vigilo analizira) → outcome lakši (koordinator obavešten) ili teški (PCC će te pozvati, prosečno čekanje, instrukcije: ne ulazi u sukob).

Tweaks: forsiraj ishodAI klasifikujeprincip P2
M6

ZmAI · chat + poziv

Chat sa AI asistentom (odgovara iz Zakona + priručnika sa izvorima). Plus voice mode: poziv ZmAI-u → triaže → prosleđuje koordinatoru / CC / pravnom timu. 6 faza poziva sa transcript-om uživo.

Tweaks: chat/call · fazavoice trijažaizvori iz Zakona
V
Vigilo M7 + M8 08 / 19
Mobile · komunikacija i veče

Poruke i OCR slikanje zapisnika

M7

Komunikacija

Zamena za Viber/Signal grupe. Inbox sa 4 razgovora: koordinator DM / par-grupa / BM grupa / HQ broadcast. Plus compose-broadcast za koordinatore — merge polja (ime/bm/smena) + live preview kako primalac vidi.

Tweaks: view · sobamerge poljaHQ broadcast
M8

OCR slikanje zapisnika

22:00, posle zatvaranja BM. Kamera UI sa frame overlay → OCR processing (sweep scanning) → rezultati sa poređenjem prema 20:00 izveštaju + per-lista konfidenca (nesigurni broj žut sa „proveri sa zapisnika").

Tweaks: stanje · loš OCRkamera UIkonfidenca
V
Vigilo M9 + M10 09 / 19
Mobile · obuka i LTO

Obuka i dugoročni izveštaji

M9

Obuka

Zamena za LearnDash. Lista 8 modula (5 done sa zvezdicama, 1 active, 1 next, 2 locked + finalni test). Video lekcija sa speed kontrolama + beleške. Kviz od 3 pitanja sa inline feedback-om i edukativnim objašnjenjem.

Tweaks: stanjevideo + kvizsertifikat auto
M10

LTO narativni unos

Dugoročni posmatrač piše izveštaj o kampanji. Lista prošlih + nov unos sa 3-osovinskim tagovanjem (akteri / fenomeni / lokacije) sa bottom-sheet pickerom + intenzitet 1-5 + dokazi.

Tweaks: view · prefilltagovi 3 oseintenzitet 1-5
V
Vigilo Vigilo Web Admin 10 / 19
03 · Vigilo Web Admin

11 web admin ekrana za HQ tim

Vue 3 / Laravel. Hi-fi mockup-i sa konzistentnim sidebar/topbar strukturom. Roles in story: šef misije R. Drobac, HR koordinator M. Stojanović, PCC operater B. Janković, analitičar V. Cvetković, komunikacioni tim J. Mladenović.

W1
Dashboard
real-time HQ
W2
Kartica BM
5 tabova
W3
Inbox
master/detail
W4
Raspored
drag-and-drop
W5
HR baza
AND/OR · 10k+
W6
Profil
7 tabova
W7
Regrutacija
pre-izborni
W8
Saopštenja
auto-tekst
W9
PCC inbox
crveni telefon
W10
Konfiguracija
izbori setup
W11
Slučajevi
AppWorks sync
V
Vigilo W1 + W2 11 / 19
Web · kontrolni centar

Dashboard izbornog dana i Kartica BM

W1

Dashboard izbornog dana

Real-time pregled za HQ. Misija header + 6 KPI (pokrivenost / posmatrači / izlaznost / incidenti / SOS / zone u opasnosti) + mapa Srbije sa regionalnim klasterima + alarmi feed + auto-saopštenje + stratum + incidenti po tipu donut.

real-timemapa Srbijeauto-saopštenje
W2

Kartica biračkog mesta

Centralni „1 BM = 1 strana" pregled. Hero + 4 stat + 2 posmatrača. 5 tabova: Profil / Kontekst / Istorijat / Okruženje / Eksterni signali. Right rail: mini-mapa + tok dana uživo.

CENTRAL HUB5 tabovalive timeline
V
Vigilo W3 + W4 12 / 19
Web · operativa

Inbox i Raspored posmatrača

W3

Inbox · LR greške i incidenti

Zamena za 21-kolonu Reports horror. Split: lista (480px) sa pri-stripe + avatar + bedževi · detalj sa AI klasifikacijom, dokazima, audit logom. J/K za navigaciju, sticky action bar (Označi rešeno E / Eskaliraj R / Otvori BM B).

ZAMENA 21-COLsplit master/detail⌨ keyboard
W4

Raspored posmatrača

Drag-and-drop pool slobodnih → BM po regijama sa 3 shift slota (Cela / Prva / Druga). Crvene zastavice za probleme (PRAZNO BEZ KOORD / 5 STO PREVIŠE / DUPLIKAT). Desni klik na chip → context menu.

drag-and-dropsmene 3red flag warnings
V
Vigilo W5 + W6 13 / 19
Web · HR

HR baza i profil posmatrača

W5

HR baza posmatrača

Tabela 10 543 sa AND/OR/NOT query builder, saved views, bulk action bar sa permission check, modernim ikon dugmadima na hover, virtual scroll bez paginacije, ocena 1-5 zvezdica.

ZAMENA 10K BOOTSTRAPAND/OR queryvirtual scroll
W6

Profil posmatrača · 7 tabova

Hero sa quick contact (Email/WhatsApp/SMS). 7 tabova: Personal / Adresa / Profile (komentar log) / Connect / Access (tipovi + sistemske role + hijerarhija) / Timeline (4 ciklusa) / History (audit log).

7 tabovaaudit logcentralni komentari
V
Vigilo W7 + W8 14 / 19
Web · analitika

Statistika regrutacije i saopštenja

W7

Statistika regrutacije

Mission header sa countdown + 5 KPI + lijevak regrutacije (7 stepenica) + dnevni tempo 14d sa weekend bars + po regionima + tipovima donut + status obuke + operativna pipeline.

pre-izborni dashboardfunnel + pipeline
W8

Saopštenja za komunikacioni tim

Auto-saopštenje composer sa 4 kanala (Dugačka mail / Kratka / X-Twitter / Web). Trend line chart sa 4 ciklusa kao linije + projekcija 20:00. Stratum + incidenti po tipu sa delta vs 2024.

auto-tekst 4 kanalapoređenja
V
Vigilo W9 + W10 15 / 19
Web · pravni + admin

PCC inbox i konfiguracija izbora

W9

PCC inbox · crveni telefon

„Crveni telefon" banner kad poziv ulazi (sweep animacija). Queue levo + Active call top + AI predlog primedbe za zapisnik (3 tona) + dokazi audio playback + Pošalji u zapisnik BM.

PRAVNI TIMAI primedbaSLA 5 min
W10

Konfiguracija novih izbora

7 sekcija (Osnove / Copy from / Tipovi posmatrača / Smene / Akreditacije / Forme / Napredna) + sticky live preview panel desno sa dinamičkim sažetkom + Copy Settings From za nasleđivanje.

7 sekcijalive previewCopy from prev
V
Vigilo W11 16 / 19
Web · integracija

Slučajevi modul · AppWorks integracija

W11

Slučajevi · case management

Case management sa embed indicator (live sync 2min). 3-fazne kartice (Pre / Tokom / Posle izbora). Levo: tim folderi (HR · Pravni · Komunikacija · Operativa · CC · Tehnički). Tabela slučajeva sa external link u AppWorks za napredne stvari (Gantt / Kanban / custom polja). Bidirekciona sinhronizacija preko webhook + API.

AppWorks sync3 faze izbora6 tim folderabidirekciono
V
Vigilo sledeći koraci 17 / 19
Sledeća iteracija

Pitanja za diskusiju sa CRTA timom

1
Validacija mobile flow-a sa Tamarom i pravim posmatračimaM2 Home, M5 Incident, M4 Statistički — testirati sa 5-10 prošlih posmatrača koji nisu tehno-savvy. SOS hold 1.2s razumljiv? „Kasni 8min · soft warning" jasan?
2
Validacija W3 inbox-a sa Vojom i analitičarimaDa li zamenjuje 21-kolonu? Šta nedostaje za ozbiljnu analitičku rutinu (saved filters, bulk merge incidenata, export u sample reportove)?
3
Migracija Vue 2 + AdminKit → Vue 3 + TailwindDušan tim odluku donosi — dizajn radi u oba. Procena trajanja i prioritetnih ekrana za prvu fazu.
4
AI komponenteM5 incident, M6 ZmAI, M8 OCR, W9 AI primedba, W1 saopštenje, W8 auto-tekst. Treba dogovor sa tehnima oko modela (Haiku ili lokalni), trening seta (CRTA istorija), RAG-a nad Zakonom.
V
Vigilo sledeći koraci 18 / 19
Tehničko i operativno

Nastavak pitanja

5
AppWorks integracija (W11)Postoji li već AppWorks API koji možemo da koristimo? Bidirekciono sinhronizacija — realan rok webhook na obe strane?
6
Migracija postojećih 10 543 posmatrača iz hrbaza.crta.rsKako prevodimo 30 flat checkbox rola u novi model (Tipovi + Sistemske role)? Trebao bi migration script + manual review po regionu.
7
Pristupačnost (a11y)Sve ikone imaju aria-label, kontrast oklch prolazi WCAG AA. Screen reader test sa NVDA na ključnim flow-ovima (M2, M5 SOS, W3 inbox).
8
Lokalizacija ćirilica vs latinicaGeist podržava obe, UI je u latinici po dogovoru. Toggle u settings-u ili je latinica final? Saopštenja ka javnosti idu na oba?
V
Vigilo v0.1 · Maj 2026 19 / 19
Hvala

Sistem koji se prilagođava
posmatračima, a ne obrnuto.

Sledeća iteracija — validacija sa CRTA timom · pilot M2 Home na 10 prošlih posmatrača · W2 Kartica BM sa Vojom.

Vigilo design system · v0.1 · Maj 2026 · za CRTA tim